<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品订单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="top-div">
      <span class="top-code">{{ detail.code }}</span>
      <span class="top-status">{{ detail.status.name }}</span>
    </div>
    <!-- 顶部信息栏 -->
    <el-card>
      <el-descriptions>
        <el-descriptions-item label="用户姓名">{{
          detail.create_user_name
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          detail.create_time
        }}</el-descriptions-item>
        <el-descriptions-item label="创建类型">用户创建</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{
          detail.create_user_phone
        }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{
          detail.create_user_name
        }}</el-descriptions-item>
        <el-descriptions-item label="订单备注">
          {{ detail.customer_remark }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-row style="margin-top: 10px">
      <el-button
        class="theme-background-color"
        size="medium"
        @click="deliverGoodsDialogVisible = true"
        v-show="detail.status.id == 12 || detail.status.id == 13"
        >发货</el-button
      >
      <el-button
        class="theme-background-color"
        size="medium"
        @click="cancelOrder"
        v-show="detail.status.id == 11"
        >取消订单</el-button
      >
      <el-button size="medium" @click="refund" v-show="detail.status.id == 12"
        >退款</el-button
      >
    </el-row>
    <!-- 卡片栏 -->
    <el-tabs type="border-card" v-model="activeName" class="main-tabs">
      <el-tab-pane label="订单信息" name="first">
        <!-- 订单信息卡片视图区域 -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-card>
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>订单信息</span>
              </div>
              <el-descriptions>
                <el-descriptions-item label="联系人"
                  >{{ detail.addr.user_name || '' }}
                </el-descriptions-item>
                <el-descriptions-item label="所在地区"
                  >{{ detail.addr.province }}*{{ detail.addr.city }}*{{
                    detail.addr.area
                  }}</el-descriptions-item
                >
                <el-descriptions-item label="合作方单号"></el-descriptions-item>
                <el-descriptions-item label="联系电话">{{
                  detail.addr.user_phone
                }}</el-descriptions-item>
                <el-descriptions-item label="详细地址">{{
                  detail.addr.address
                }}</el-descriptions-item>
                <el-descriptions-item label="同步结果"></el-descriptions-item>
              </el-descriptions>
            </el-card>
            <!-- 商品信息卡片视图区域 -->
            <el-card>
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>商品信息</span>
              </div>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="编号"></el-table-column>
                <el-table-column
                  prop="goods_name"
                  label="商品名称【ID】"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="goods_num" label="商品数量">
                </el-table-column>
                <el-table-column prop="goods_price" label="商品单价">
                </el-table-column>
                <el-table-column prop="goods_total_price" label="商品总额">
                </el-table-column>
                <el-table-column prop="discount_amount" label="商品优惠金额">
                  <template slot-scope="scope">
                    {{ scope.row.discount_amount }}
                    <el-link
                      type="primary"
                      v-if="scope.row.coupon_code != ''"
                      >{{ scope.row.coupon_code }}</el-link
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="discount_fare" label="邮费优惠金额">
                  <template slot-scope="scope">
                    {{ scope.row.discount_fare }}
                    <el-link
                      type="primary"
                      v-if="scope.row.express_coupon_code != ''"
                      >{{ scope.row.express_coupon_code }}</el-link
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="surplus_amount" label="余额">
                </el-table-column>
                <el-table-column prop="price" label="应付金额">
                </el-table-column>
                <el-table-column prop="pay" label="付款信息"> </el-table-column>
              </el-table>
            </el-card>
            <!-- 物流信息卡片视图区域 -->
            <el-card>
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>物流信息</span>
              </div>
              <!-- 图片 -->
              <el-row>
                <el-col :span="6">
                  <div>
                    <img />
                    <br />
                    <span>{{ logistics.express_company }}：</span>
                    <span>{{ logistics.express_num }}</span>
                  </div>
                </el-col>
                <el-col>
                  <el-timeline>
                    <el-timeline-item
                      v-for="(activity, index) in logistics.express_info"
                      :key="index"
                      :timestamp="activity.time"
                    >
                      {{ activity.status }}
                    </el-timeline-item>
                  </el-timeline>
                </el-col>
              </el-row>
            </el-card>
            <!-- 服务信息卡片视图区域 -->
            <el-card v-if="detail.goods_type == 1">
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>服务信息</span>
              </div>
              <el-table :data="serviceInfoTable" border style="width: 100%">
                <el-table-column prop="date" label="服务卡号" width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="服务卡名称【ID】"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="address" label="服务次数">
                </el-table-column>
                <el-table-column prop="address" label="已使用次数">
                </el-table-column>
                <el-table-column label="操作">
                  <el-link>查看预约详情</el-link>
                </el-table-column>
              </el-table>
            </el-card>
            <!-- 评价信息卡片视图区域 -->
            <el-card>
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>评价信息</span>
              </div>
              <el-descriptions>
                <el-descriptions-item label="评价星级">{{
                  detail.create_user_name
                }}</el-descriptions-item>
                <el-descriptions-item label="服务评价">{{
                  detail.create_time
                }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :span="6" style="height: 100%">
            <el-card>
              <div slot="header">
                <div class="green-reactangle"></div>
                <span>客服备注</span>
                <div style="float: right">
                  <i class="el-icon-edit" @click="addPlatRemark"></i>
                </div>
              </div>
              <el-timeline style="overflow: auto">
                <el-timeline-item
                  v-for="(item, index) in detail.plat_remark"
                  :key="index"
                  :timestamp="item.time"
                  placement="top"
                >
                  <el-row>
                    <el-col :span="14">{{ item.remark }}</el-col>
                    <el-col :span="10">【{{ item.operatorName }}】</el-col>
                  </el-row>
                </el-timeline-item>
              </el-timeline>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="second">
        <!-- 操作记录卡片视图区域 -->
        <el-row>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in logData"
              :key="index"
              :timestamp="item.createTime + '【' + item.operatorName + '】'"
              >{{ item.content }}
            </el-timeline-item>
          </el-timeline>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <!-- 发货弹窗 -->
    <el-dialog
      title="发货"
      :visible.sync="deliverGoodsDialogVisible"
      width="30%"
      :before-close="deliverGoodsHandleClose"
    >
      <el-form
        ref="expressFromRef"
        :model="expressFrom"
        :rules="expressFromRules"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="物流公司" prop="name">
          <el-input v-model="expressFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="number">
          <el-input v-model="expressFrom.number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deliverGoodsDialogVisible = false">取 消</el-button>
        <el-button class="theme-background-color" @click="saveExpressData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: {
        code: '',
        status: {},
        create_user_name: '',
        addr: {}
      },
      //   控制定价规则卡片视图区域的显示与隐藏
      ruleCardVisible: true,
      activeName: 'first',
      logistics: [],
      tableData: [{ status: 1 }],
      logData: [],
      serviceInfoTable: [],
      // 控制发货弹窗的显示与隐藏
      deliverGoodsDialogVisible: false,
      expressFrom: {
        id: '',
        name: '',
        number: ''
      },
      expressFromRules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        number: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    async getDetailData() {
      // 请求数据
      const { data: res } = await this.$http.post('/admin/order_goods/detail', {
        id: this.$route.query.id
      })
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品订单详情失败！')
      }
      // 返回结果
      this.detail = res.data
      if (this.detail.addr == null) {
        this.detail.addr = {}
      }
      // console.log(this.detail)
      this.tableData = [
        {
          goods_name: this.detail.goods_name + '[' + this.detail.goods_id + ']',
          goods_num: this.detail.goods_num,
          goods_price: this.detail.goods_price,
          goods_total_price: this.detail.goods_total_price,
          discount_amount: this.detail.discount_amount,
          surplus_amount: this.detail.surplus_amount,
          discount_fare: this.detail.discount_fare,
          price: this.detail.price,
          pay:
            '支付方式:' +
            this.detail.pay_way.name +
            '[' +
            this.detail.pay_finish_time +
            ']'
        }
      ]
      // 请求数据
      const { data: res2 } = await this.$http.post(
        '/admin/order_goods/logList',
        {
          id: this.$route.query.id
        }
      )
      this.logData = res2.data

      // 请求数据
      const { data: res3 } = await this.$http.post(
        '/admin/logistics/sendLogistics',
        {
          order_id: this.$route.query.id,
          express_num: this.$route.query.expressNum
        }
      )
      this.logistics = res3
    },
    cancelOrder() {
      // 弹框询问是否下架商品
      this.$prompt('是否确认取消该订单？取消后不可恢复', '取消订单', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        inputPattern: /^(?!.{500}|^\s*$)/g,
        inputErrorMessage: '请输入取消原因',
        closeOnClickModal: false
      })
        .then(async ({ value }) => {
          // console.log(value)
          const { data: res } = await this.$http.post(
            '/admin/order_goods/cancel',
            {
              id: this.detail.id,
              reason: value
            }
          )
          if (res.meta.status !== 200) {
            return this.$message.error(res.meta.msg)
          }
          this.$message.success('成功取消')
          this.getDetailData()
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    refund() {
      // 弹框询问是否下架商品
      this.$prompt(
        '是否确认退款？确认退款后已付款金额<span style="color:red">' +
          this.detail.price +
          '</span> 元将原路返还至客户账户中',
        '退款',
        {
          confirmButtonText: '确认退款',
          cancelButtonText: '暂不退款',
          type: 'warning',
          inputPattern: /^(?!.{500}|^\s*$)/g,
          inputErrorMessage: '请输入退款原因',
          closeOnClickModal: false,
          dangerouslyUseHTMLString: true
        }
      )
        .then(async ({ value }) => {
          // console.log(value)
          const { data: res } = await this.$http.post('/admin/pay/refund', {
            order: this.detail.code,
            reason: value
          })
          if (res.meta.status !== 200) {
            return this.$message.error(res.meta.msg)
          }
          this.$message.success('成功退款')
          this.getDetailData()
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    addPlatRemark() {
      this.$prompt('请输入备注', '添加备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(?!.{500}|^\s*$)/g,
        inputErrorMessage: '请输入备注'
      })
        .then(async ({ value }) => {
          // console.log(value)
          const { data: res } = await this.$http.post(
            '/admin/order_goods/addRemark',
            {
              id: this.detail.id,
              remark: value
            }
          )
          if (res.meta.status !== 200) {
            return this.$message.error(res.meta.msg)
          }
          this.$message.success('添加成功')
          this.getDetailData()
        })
        .catch(() => {
          this.$message.info('已取消操作')
        })
    },
    deliverGoodsHandleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          // 清空表单数据
          this.$refs.expressFromRef.resetFields()
          done()
        })
        .catch((_) => {})
    },
    saveExpressData() {
      this.$refs.expressFromRef.validate(async (valid) => {
        if (!valid) return false
        this.expressFrom.id = this.detail.id
        const { data: res } = await this.$http.post(
          '/admin/order_goods/setLogistics',
          this.expressFrom
        )
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.deliverGoodsDialogVisible = false
        this.getDetailData()
        this.$message.success('成功发货')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-col:nth-child(odd) .el-card {
  margin: 10px 0;
  height: auto;
}
.el-col:nth-child(even) .el-card {
  margin: 10px 0 20px 0;
  height: 100%;
}
.el-timeline {
  margin-left: -40px;
}
.top-div {
  margin: 10px 0px;
  .top-code {
    font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
    font-weight: 700;
    font-size: 16px;
  }
  .top-status {
    font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #009688;
    line-height: normal;
    margin-left: 30px;
  }
}
.main-tabs {
  margin-top: 10px;
}
.green-reactangle {
  width: 1px;
  height: 10px;
  border: 1px solid #2ba79c;
  background-color: #2ba79c;
  display: inline-block;
  margin-right: 5px;
}
</style>
